<template>
<div class="Order">


 <el-row >
  <div  v-for="(p, index) in parkingData" :key="index" > 
<el-col  :span="4"  :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }"  style="width:350px; height:520px;">
      <img :src="p.parkingSpacePic" class="image" style="width:350px; height:350px;">
      <div style="padding: 14px;">
        <div>车位位置:{{p.parkingSpaceAddr}}</div>
        <div><span>审核状态:{{p.check}}</span>
        
        <el-button type="text" @click="open(index)">详情</el-button> </div>
        <div><span>出租价格：{{ p.dayCost }} 元每天 / {{p.hourCost}} 元每小时</span></div>

        <div class="bottom clearfix">
        </div>
 

      
        <div class="btn"> 
         
            <el-button size="small"  type="primary" slot="reference" @click="show(index)" :disabled="p.is">发布车位</el-button>
         
        <el-button size="small" style="width:100px" type="success" @click="del(index)" :disabled="p.is1">删除车位</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
  </div>
 </el-row>
<el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size" :current-page="pageData.current" @current-change="handleChange">
</el-pagination>
</div>
</template>
<style>


  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 1px;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

.page{
  width: 800px;
  margin-left: 100px;
}
.duu{
  margin-left: 20px;
  display: block;
}
#map{
  width: 500px;
  height: 500px;
}
</style>


<script>


export default {
  name: 'Order',
  data() {

      return {
        ruleForm:{
          rentEndTime:'',
        value2:"",
        startTime: '',
        endTime: '',
          },
        rentStartTime:'',
        rentEndTime:'',
        value2:"",
        startTime: '',
        endTime: '',
        delivery: false,
        showPosition:false,
        intervalId:null,
        loading:[] ,
        ban:true,
        is:true,
        is1:false,
        dialog: false,
        visible: false,
        storeLocation:[],
        rentype:'',

        pageData: {
                        total: 1,
                        size: 4,
                        current: 1
                    },
       

        parkingData:[{
                is:true,
                check:'',
                parkingSpaceId:"",
                userId:localStorage.getItem("loginUser"),
                parkingSpaceNo:"", 
                parkingSpacePropertyPic:"",
                propertyManagerId:"",
                hourCost:"",
                dayCost:"",
                message:"",
                parkingSpaceRelownerPic:"",
                parkingSpaceOwnerPic:"",
                weekCost:"",
                pointY:'',
                pointX:'',
                parkingSpaceAddr:'',
                parkingSpacePic:'',
                state:"",
                

        }],


        rentMessage:{
                check:"",
                userId:localStorage.getItem("loginUser"),
                parkingSpaceNo:"", 
                parkingSpacePropertyPic:"",
                propertyManagerId:"",
                hourCost:"",
                dayCost:"",
                parkingSpaceRelownerPic:"",
                parkingSpaceOwnerPic:"",
                weekCost:"",
                pointY:'',
                pointX:'',
                status:"出租中",
                parkingSpaceAddr:'',
                parkingSpacePic:'',
                rentype:"",
                rentStartTime:"",
                rentEndTime:"",
        },

         
        
      }
      },
     

 
  methods:{

     open(index) {
        this.$alert(this.parkingData[index].message, '审核详情', {
          confirmButtonText: '确定',
        
        });
      },

    del(index){
        this.$http.get("/delparkingspace",{
          params:{
            parkingSpaceId:this.parkingData[index].parkingSpaceId
          }
        })
        .then(res => {
                if(res!=null){
                  this.$message({
                    type:'success',
                    message:'成功删除'
                })
                }else{
                  this.$message.error('删除失败');
                }
                this.getData()
        })
    },
      show(index){
                // if(this.parkingData[index].state==0){
                    
                //     this.rentMessage.check[index]="等待审核中"
                //   }else if(this.parkingData[i].state==1){
                //     this.rentMessage.check[index]="审核未通过"
                    
                //   }else if(this.parkingData[i].state==2){
                //      this.rentMessage.check[index]="审核通过"
                    
                //   }
          // console.log(this.parkingData[index].parkingSpaceId) 
          this.$router.push({
                        name:'Out',
                        params:{parkingSpaceId:this.parkingData[index].parkingSpaceId}
                
                    })
      },

      getData(){
     this.$http.get("/findallparkingspace",{
            params:{
                userId:1,
                current: this.pageData.current,  
            }
          })
          .then(res => {
                if(res!=null){
               console.log(res)
                this.parkingData=res.data.data.records
                this.pageData.total=res.data.data.total
                for(var i=0;i<this.parkingData.length;i++){
                 
                  if(this.parkingData[i].state==0){
                    this.parkingData[i].is=true
                    this.parkingData[i].is1=false
                    this.parkingData[i].check="等待审核中"
                  }else if(this.parkingData[i].state==1){
                    this.parkingData[i].check="审核未通过"
                    this.parkingData[i].is=true
                    this.parkingData[i].is1=false
                  }else if(this.parkingData[i].state==2){
                     this.parkingData[i].check="审核通过"
                    this.parkingData[i].is=false
                    this.parkingData[i].is1=false
                  }else if(this.parkingData[i].state==3){
                    this.parkingData[i].check="已出租"
                    this.parkingData[i].is=true
                    this.parkingData[i].is1=true
                  }
                }
                }
                
            })
            .catch(err => {
                console.error(err); 
            })
        },

    timer() {
         this.intervalId=setInterval(()=>{
          this.getData()
        },10000);
    },

    
 handleChange(data) {
                    console.log(data);
                    //5.修改当前页，并且发起新的查询
                    this.pageData.current = data;
                    this.getData();
                },
    
     resetForm() {
         console.log(this.value2)
       this.dialog=false
      },

  
    hour(){
      console.log("asda")
      if(this.delivery){
       this.ban=false
      }else{
       this.ban=true
      }
    },

        submitForm(index) {
            this.dialog=false
            this.rentMessage=this.parkingData[index];
            
             this.$http.post("/addOrder",this.rentMessage)
            .then(res => {
                if(res!=null){
                  this.$message({
                    type:'success',
                    message:'发布车位成功！'
                })
                }else{
                   
                   this.$message.error('发布车位失败哦！');
                }
               
            })
            .catch(err => {
                console.error(err); 
            })
             
        
        
        
      },
    
    



  },
mounted(){
    this.getData();
    // this.timer()
  },

   destroyed(){
    // 在页面销毁后，清除计时器
    
}
   

}
  

</script>

